<template>
  <view class="approval-page">
    <!-- 顶部导航 -->
    <view class="nav-header">
      <view class="nav-left" @click="goBack">
        <text class="back-icon">‹</text>
      </view>
      <view class="nav-center">
        <text class="nav-title">审批管理</text>
      </view>
      <view class="nav-right">
        <text class="search-icon" @click="showSearch">🔍</text>
      </view>
    </view>

    <!-- 统计卡片 -->
    <view class="stats-section">
      <view class="stats-grid">
        <view class="stat-item">
          <text class="stat-number">{{ stats.pending }}</text>
          <text class="stat-label">待审批</text>
        </view>
        <view class="stat-item">
          <text class="stat-number">{{ stats.approved }}</text>
          <text class="stat-label">已通过</text>
        </view>
        <view class="stat-item">
          <text class="stat-number">{{ stats.rejected }}</text>
          <text class="stat-label">已驳回</text>
        </view>
      </view>
    </view>

    <!-- 筛选标签 -->
    <view class="filter-section">
      <scroll-view class="filter-scroll" scroll-x="true">
        <view class="filter-tags">
          <view
            class="filter-tag"
            :class="{ active: activeFilter === 'all' }"
            @click="setFilter('all')"
          >
            <text>全部</text>
          </view>
          <view
            class="filter-tag"
            :class="{ active: activeFilter === 'pending' }"
            @click="setFilter('pending')"
          >
            <text>待审批</text>
          </view>
          <view
            class="filter-tag"
            :class="{ active: activeFilter === 'approved' }"
            @click="setFilter('approved')"
          >
            <text>已通过</text>
          </view>
          <view
            class="filter-tag"
            :class="{ active: activeFilter === 'rejected' }"
            @click="setFilter('rejected')"
          >
            <text>已驳回</text>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 审批列表 -->
    <view class="list-section">
      <view class="list-header">
        <text class="list-title">审批列表</text>
        <text class="list-count">共{{ filteredList.length }}条</text>
      </view>

      <view class="approval-list" v-if="filteredList.length > 0">
        <view
          class="approval-item"
          v-for="item in filteredList"
          :key="item.id"
          @click="viewDetail(item)"
        >
          <view class="item-header">
            <view class="item-title">
              <text class="title-text">{{ item.title }}</text>
              <view class="status-badge" :class="item.status">
                <text class="status-text">{{ getStatusText(item.status) }}</text>
              </view>
            </view>
            <text class="item-time">{{ item.submitTime }}</text>
          </view>
          <view class="item-content">
            <text class="item-desc">{{ item.description }}</text>
          </view>
          <view class="item-footer">
            <view class="item-info">
              <text class="info-text">申请人：{{ item.applicant }}</text>
              <text class="info-text">申请时间：{{ item.createTime }}</text>
            </view>
            <view class="item-actions" v-if="item.status === 'pending'">
              <text class="action-btn reject" @click.stop="rejectItem(item)">驳回</text>
              <text class="action-btn approve" @click.stop="approveItem(item)">通过</text>
            </view>
          </view>
        </view>
      </view>

      <view class="empty-state" v-else>
        <text class="empty-icon">📋</text>
        <text class="empty-text">暂无审批数据</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'

// 统计数据
const stats = ref({
  pending: 0,
  approved: 0,
  rejected: 0,
})

// 当前筛选状态
const activeFilter = ref('all')

// 审批列表数据
const approvalList = ref([
  {
    id: 1,
    title: '关于召开年度总结会议的通知',
    description: '市政府办公室关于召开年度总结会议的通知文件',
    applicant: '张三',
    status: 'pending',
    submitTime: '2024-01-15 09:30',
    createTime: '2024-01-15 09:00',
  },
  {
    id: 2,
    title: '关于加强疫情防控工作的通知',
    description: '市卫健委关于加强疫情防控工作的通知',
    applicant: '李四',
    status: 'approved',
    submitTime: '2024-01-14 14:20',
    createTime: '2024-01-14 14:00',
  },
  {
    id: 3,
    title: '关于元旦假期安排的通知',
    description: '市政府关于元旦假期安排的通知',
    applicant: '王五',
    status: 'rejected',
    submitTime: '2024-01-13 16:45',
    createTime: '2024-01-13 16:30',
  },
])

// 筛选后的列表
const filteredList = computed(() => {
  if (activeFilter.value === 'all') {
    return approvalList.value
  }
  return approvalList.value.filter((item) => item.status === activeFilter.value)
})

// 获取状态文本
const getStatusText = (status: string) => {
  const statusMap = {
    pending: '待审批',
    approved: '已通过',
    rejected: '已驳回',
  }
  return statusMap[status] || '未知'
}

// 设置筛选条件
const setFilter = (filter: string) => {
  activeFilter.value = filter
}

// 返回上一页
const goBack = () => {
  const pages = getCurrentPages()
  console.log('[goBack] 当前页面栈数量:', pages.length)

  // 如果页面栈只有1个页面，说明无法返回，直接跳转到首页
  if (pages.length <= 1) {
    console.log('[goBack] 页面栈只有1个，跳转到首页')
    uni.reLaunch({
      url: '/pages/index/index',
    })
  } else {
    // 有多个页面，执行返回操作
    console.log('[goBack] 执行返回操作')
    uni.navigateBack({
      delta: 1,
    })
  }
}

// 显示搜索
const showSearch = () => {
  uni.showToast({
    title: '搜索功能开发中',
    icon: 'none',
  })
}

// 查看详情
const viewDetail = (item: any) => {
  uni.navigateTo({
    url: `/pages/document/approval/detail?id=${item.id}`,
    fail: () => {
      uni.showToast({
        title: '页面开发中',
        icon: 'none',
      })
    },
  })
}

// 审批通过
const approveItem = (item: any) => {
  uni.showModal({
    title: '确认审批',
    content: '确定要通过这个审批吗？',
    success: (res) => {
      if (res.confirm) {
        // TODO: 实现审批通过逻辑
        item.status = 'approved'
        uni.showToast({
          title: '审批通过',
          icon: 'success',
        })
        loadData() // 重新加载数据
      }
    },
  })
}

// 审批驳回
const rejectItem = (item: any) => {
  uni.showModal({
    title: '确认驳回',
    content: '确定要驳回这个审批吗？',
    success: (res) => {
      if (res.confirm) {
        // TODO: 实现审批驳回逻辑
        item.status = 'rejected'
        uni.showToast({
          title: '已驳回',
          icon: 'success',
        })
        loadData() // 重新加载数据
      }
    },
  })
}

// 加载数据
const loadData = async () => {
  try {
    // TODO: 实现API调用
    // 模拟数据
    stats.value = {
      pending: approvalList.value.filter((item) => item.status === 'pending').length,
      approved: approvalList.value.filter((item) => item.status === 'approved').length,
      rejected: approvalList.value.filter((item) => item.status === 'rejected').length,
    }
  } catch (error) {
    console.error('加载数据失败:', error)
    uni.showToast({
      title: '加载数据失败',
      icon: 'none',
    })
  }
}

onMounted(() => {
  loadData()
})
</script>

<style lang="scss" scoped>
.approval-page {
  min-height: 100vh;
  background: #f8f9fa;

  /* 顶部导航 */
  .nav-header {
    background: #1a3582;
    padding: 20rpx 32rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;

    .nav-left {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .back-icon {
        font-size: 40rpx;
        font-weight: bold;
      }
    }

    .nav-center {
      flex: 1;
      text-align: center;

      .nav-title {
        font-size: 36rpx;
        font-weight: bold;
      }
    }

    .nav-right {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .search-icon {
        font-size: 32rpx;
      }
    }
  }

  /* 统计卡片 */
  .stats-section {
    padding: 32rpx;
    margin-top: -20rpx;
    position: relative;
    z-index: 2;

    .stats-grid {
      display: flex;
      gap: 24rpx;

      .stat-item {
        flex: 1;
        background: white;
        border-radius: 16rpx;
        padding: 32rpx 24rpx;
        text-align: center;
        box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
        border: 1rpx solid #e5e7eb;

        .stat-number {
          display: block;
          font-size: 40rpx;
          font-weight: bold;
          color: #1a3582;
          margin-bottom: 8rpx;
        }

        .stat-label {
          display: block;
          font-size: 24rpx;
          color: #6b7280;
        }
      }
    }
  }

  /* 筛选标签 */
  .filter-section {
    padding: 0 32rpx 24rpx;

    .filter-scroll {
      white-space: nowrap;

      .filter-tags {
        display: flex;
        gap: 16rpx;

        .filter-tag {
          padding: 16rpx 32rpx;
          background: white;
          border-radius: 24rpx;
          border: 1rpx solid #e5e7eb;
          transition: all 0.3s ease;

          &.active {
            background: #1a3582;
            border-color: #1a3582;

            text {
              color: white;
            }
          }

          text {
            font-size: 26rpx;
            color: #6b7280;
          }
        }
      }
    }
  }

  /* 列表区域 */
  .list-section {
    padding: 0 32rpx 40rpx;

    .list-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24rpx;

      .list-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #1a3582;
      }

      .list-count {
        font-size: 24rpx;
        color: #6b7280;
      }
    }

    .approval-list {
      .approval-item {
        background: white;
        border-radius: 16rpx;
        padding: 24rpx;
        margin-bottom: 16rpx;
        box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
        border: 1rpx solid #e5e7eb;

        .item-header {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          margin-bottom: 16rpx;

          .item-title {
            flex: 1;
            display: flex;
            align-items: center;
            gap: 16rpx;

            .title-text {
              font-size: 28rpx;
              font-weight: 600;
              color: #1a3582;
              flex: 1;
            }

            .status-badge {
              padding: 8rpx 16rpx;
              border-radius: 12rpx;
              font-size: 20rpx;

              &.pending {
                background: #fef3c7;
                color: #92400e;
              }

              &.approved {
                background: #d1fae5;
                color: #065f46;
              }

              &.rejected {
                background: #fee2e2;
                color: #dc2626;
              }

              .status-text {
                font-size: 20rpx;
              }
            }
          }

          .item-time {
            font-size: 22rpx;
            color: #9ca3af;
          }
        }

        .item-content {
          margin-bottom: 16rpx;

          .item-desc {
            font-size: 24rpx;
            color: #6b7280;
            line-height: 1.4;
          }
        }

        .item-footer {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .item-info {
            flex: 1;

            .info-text {
              display: block;
              font-size: 22rpx;
              color: #9ca3af;
              margin-bottom: 4rpx;
            }
          }

          .item-actions {
            display: flex;
            gap: 16rpx;

            .action-btn {
              padding: 12rpx 24rpx;
              border-radius: 12rpx;
              font-size: 22rpx;
              border: 1rpx solid #e5e7eb;

              &.reject {
                color: #dc2626;
                background: #fee2e2;
                border-color: #fecaca;
              }

              &.approve {
                color: white;
                background: #1a3582;
                border-color: #1a3582;
              }
            }
          }
        }
      }
    }

    .empty-state {
      text-align: center;
      padding: 80rpx 0;

      .empty-icon {
        font-size: 80rpx;
        display: block;
        margin-bottom: 24rpx;
      }

      .empty-text {
        font-size: 28rpx;
        color: #9ca3af;
      }
    }
  }
}
</style>
